<template>
  <div class="detail-top">
    <!--轮播图-->
    <el-carousel indicator-position="outside" height="258px" class="ration">
      <el-carousel-item v-for="(item, index) in course.rotationList" :key="index">
        <el-image :src="settings.fileUrl + item.url + '/' + item.code" />
      </el-carousel-item>
    </el-carousel>
    <!--课程描述-->
    <div class="descript">
      <!--标题-->
      <div class="title">{{ course.name }}</div>
      <div class="desc-font">
        开课时间：
        {{ parseTime(course.startTime, '{y}.{m}.{d}') }} - {{ parseTime(course.finishTime, '{m}.{d}') }}
        {{ '\xa0\xa0\xa0' + course.lessonDuration }}课时
      </div>
      <div class="desc-font">限售人数： {{ course.capacity }}</div>
      <div class="desc-font">适合年龄段： {{ course.age }}</div>
      <div v-show="course.experienceTime != null && course.experienceTime !== ''" class="desc-font">课程体验时间：
        <span>{{ parseTime(course.experienceTime, '{y}.{m}.{d} {h}:{m}') }}</span></div>
      <div class="price"><span class="icon">￥</span>{{ course.price }}</div>
      <el-button v-show="!isReserve && !isBuy" type="success" class="btn-experience" @click="handleReserve">预约体验</el-button>
      <el-button v-show="isReserve" type="success" class="btn-experience" @click="cancleReserve">取消体验</el-button>
      <el-button v-show="!isBuy" type="danger" class="btn-submit" @click="handleBuy">立即购买</el-button>
      <div class="desc-font" style="margin-top: 10px;">已售：{{ course.capacity - course.surplus }}</div>
    </div>
  </div>
</template>

<script>
import settings from '@/settings'
import { parseTime } from '@/utils'
import { checkBuyCourse } from '@/api/course'
import { reserveByCourseId, cancleReserveByCourseId, checkReserveByCourseId } from '@/api/reserve'
import { getInfo } from '@/api/user'

export default {
  name: 'CourseInfo',
  props: {
    course: {
      required: true,
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      settings,
      // 是否购买
      isBuy: false,
      // 是否预约
      isReserve: false,
      isBand: false
    }
  },
  created() {
    // 判断是否登录
    if (this.$store.getters.name !== '') {
      // 已经登陆
      this.checkBuy()
      this.checkReserve()
      this.checkUserBandRealNameAndPhone()
    }
  },
  methods: {
    // 格式化时间
    parseTime(time, format) {
      if (format == null || format === '') {
        return parseTime(time)
      }
      return parseTime(time, format)
    },
    // 检查用户是否绑定手机号和真实姓名
    checkUserBandRealNameAndPhone() {
      getInfo().then(res => {
        if (res.data.realName !== null && res.data.phone !== '') {
          this.isBand = true
        }
      })
    },
    // 购买课程处理函数
    handleBuy() {
      if (this.isBand) {
        this.$router.push('/create?id=' + this.course.id)
      } else {
        this.$notify.warning({
          title: '警告',
          message: '请先设置账户真实姓名及手机号',
          duration: 2000
        })
        this.$router.push('/account')
      }
    },
    // 检查 学生是否预约体验
    checkReserve() {
      checkReserveByCourseId(this.$route.query.csId).then(res => {
        this.isReserve = res.data > 0
      })
    },
    // 预约体验课程
    handleReserve() {
      if (!this.$store.getters.token) {
        this.$router.push('/login?redirect=detail&csId=' + this.course.id)
      }
      if (!this.isBand) {
        this.$notify.warning({
          title: '警告',
          message: '请先设置账户真实姓名及手机号',
          duration: 2000
        })
        this.$router.push('/account')
      } else {
        reserveByCourseId(this.course.id).then(res => {
          this.$notify.success({
            title: '成功',
            message: res.msg,
            duration: 2000
          })
          this.isReserve = true
        })
      }
    },
    // 取消预约体验课程
    cancleReserve() {
      cancleReserveByCourseId(this.course.id).then(res => {
        this.$notify.success({
          title: '成功',
          message: res.msg,
          duration: 2000
        })
        this.isReserve = false
      })
    },
    // 检查是否已购买该课程
    checkBuy() {
      checkBuyCourse(this.$route.query.csId).then(res => {
        this.isBuy = res.data > 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-top {
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  height: 430px;
  width: 100%;
  padding-top: 80px;
  //轮播图
  .ration {
    height: 290px;
    width: 460px;
    margin-right: 100px;

    .el-image {
      width: 460px;
      height: 258px;
    }
  }

  //课程描述区
  .descript {
    height: 290px;

    .title {
      font-size: 30px;
      line-height: 30px;
      margin-bottom: 20px;
      width: 280px;
    }

    .desc-font {
      color: #999;
      line-height: 16px;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .price {
      .icon {
        font-size: 18px;
      }

      font-size: 30px;
      color: #f44839;
      margin: 15px 0;
    }

    .btn-experience {
      font-size: 16px;
      font-weight: bold;
    }

    .btn-submit {
      font-size: 16px;
      background-color: #f3493a;
      font-weight: bold;
    }
  }
}
</style>
